<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!--    解决在注册页面过程中的账号密码校验-->
    <!--解决乱码问题-->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <!--2.引入 JQuery -->
    <script src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <!--3.引入线上 Bootstrap 的 js 文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <!--4.validate核心校验文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <!--    来源于JQUery的封装-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./asserts/css/my-login.css">
    <script type="text/javascript">
        $(function () {
            $("#button_id").click(function () {
                /*var url = "http://localhost:8080/Ajax/UserServlet";
                var reqData = {
                  action:"login",
                  username:$("#username").val(),
                  password:$("#password").val()
                };
                $.get(url,reqData,function (data) {
                    if(data == "success"){
                        location.href="index.html";
                    }else if(data == "error"){
                        alert("用户名或者密码错误");
                    }
                })*/
                $.ajax({
                    url:"http://localhost:8080/Ajax/UserServlet",
                    //是否为异步
                    async:true,
                    type:"get",
                    data:{
                        action:"login",
                        username:$("#username").val(),
                        password:$("#password").val()
                    },
                    //回调成功执行的函数
                    success:function (data) {
                        if(data == "success"){
                            location.href="index.html";
                        }else if(data == "error"){
                            alert("用户名或者密码错误");
                        }
                    },
                    //失败时执行的函数
                    error:function (data) {

                    },
                    //必须执行的函数
                   /* complete:function () {
                        alert("一定执行")
                    },*/
                    //告诉JQuery传输的数据为data对象
                   /* processDate:false,
                    contentType:false*/
                })
            })
        })
    </script>
</head>
<body class="my-login-page">
<section class="h-100">
    <div class="container h-100">
        <div class="row justify-content-md-center h-100">
            <div class="card-wrapper">
                <div class="brand">
                    <img src="asserts/img/login/logo.jpg" alt="logo">
                </div>
                <div class="card fat">
                    <div class="card-body">
                        <h4 class="card-title">用户登录</h4>
                        <form method="POST" class="my-login-validation" novalidate="">
                            <div class="form-group">
                                <label for="email">UserName</label>
                                <input id="email" type="email" class="form-control" name="email" value="" required autofocus>
                                <div class="invalid-feedback">
                                    Email is invalid
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="password">Password
                                    <a href="forgotPassword.html" class="float-right">
                                        Forgot Password?
                                    </a>
                                </label>
                                <input id="password" type="password" class="form-control" name="password" required data-eye>
                                <div class="invalid-feedback">
                                    Password is required
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="custom-checkbox custom-control">
                                    <input type="checkbox" name="remember" id="remember" class="custom-control-input">
                                    <label for="remember" class="custom-control-label">Remember Me</label>
                                </div>
                            </div>

                            <div class="form-group m-0">
                                <button type="submit" class="btn btn-primary btn-block">
                                    Login
                                </button>
                            </div>
                            <div class="mt-4 text-center">
                                Don't have an account? <a href="rf_register.html">Create One</a>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="footer">
                    Copyright &copy; 2021 &mdash; MAITIAN.Co.,Ltd.
                </div>
            </div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="asserts/js/my-login.js"></script>
</body>
</html>